<template>
	<div class="error-page">
		<div class="error-code">4<span>0</span>3</div>
		<div class="error-desc">{{$t('tip403')}}</div>

		<div  class="swiper-container" ref="videoDisplaySlide" id="videoDisplaySlide">
			<div style="height: 400px;width: 400px;" class="swiper-wrapper">
				<div class="swiper-slide" v-for="(slide, index) in videoDisplaySlideList" :key="index">
					 
						<video :poster="isMobile ? slide.preview : null"
						 style="width: 100%;height: 100%"
						 @play="videoPlay(index)" ref="video"
							:src="baseUrl+slide.fileUrl" controls @loadedmetadata="handleLoadedMetadata" preload="auto"
							muted x5-video-player-type="h5" x5-playsinline playsinline webkit-playsinline="true"
							class="videoList"></video>

					 
				</div>
			</div>
		</div>

		<div class="error-handle">
			<router-link to="/">
				<el-button type="primary" size="large">{{$t('goHome')}}</el-button>
			</router-link>
			<el-button class="error-btn" type="primary" size="large" @click="goBack()">{{$t('goPrevious')}}</el-button>
		</div>
	</div>
</template>

<script>
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		data() {
			return {
					isShowJumper: true,
					isMobile: false,
					loading: true,
					baseUrl: this.$request.getImgUrl(),
					bg_img: '', //头部banner，默认值已绑定，有背景自动切换
					bgColor: "white", //white/red
					pageSize: 4,
					total: 0,
					currentPage: 1,
				 
					videoDisplaySlideList: [],
					breadcrumbItems: [{
							//首页
							label: this.$t('home'),
							to: '/home'
						},
						{
							//企业新闻
							label: this.$t('corporateNews'),
							to: '/corporateNews'
						},
						{
							//公告公示
							label: this.$t('videoDisplay'),
							to: '/videoDisplay'
						}
					],
					videosList: [],
					hoverIndex: -1,
					videoDisplaySlideSwiper: null,
					controls: true
				};
		 
		},
		mounted() {
			if (this.$request.checkIsMobile()) {
				this.isShowJumper = false;
			}
			 
			 
			this.bindVideoDisplayList().then(data => {
				this.initProductSwiper();
				this.loading = false;
				// 获取所有 .slide-content 元素
				const slideContents = document.querySelectorAll('.slide-content');
				// 遍历每个 .slide-content 元素
				slideContents.forEach(slideContent => {
					// 在当前 .slide-content 元素中查找所有视频元素
					const videos = slideContent.querySelectorAll('video');
					// 遍历每个视频元素
					videos.forEach(video => {
						video.addEventListener('play', () => {
							console.log('视频开始播放');
							// 在这里可以添加你的逻辑代码
							this.videoPlay();
						});
						video.addEventListener('ended', () => {
							console.log('视频播放完成');
							this.videoStop();
						});
					});
				});
				this.$request.handleLoadDataPreView();
				this.isMobile = this.$request.checkIsMobile();
			});
		},
		methods: {
			goBack() {
				this.$router.go(-1);
			},
			///////////////获取新闻动态数据
			bindVideoDisplayList() {
				return new Promise((resolve, reject) => {
					// 请求表格数据
					let params = {};
					let that = this;
					this.$request.videoDisplayList(params).then(res => {
						if (res && res.data) {
							this.videoDisplaySlideList = res.data;
			
						}
						resolve();
					}).catch((error) => {
						console.log(error)
					})
				})
			},
			initProductSwiper() {
				if (this.videoDisplaySlideSwiper) {
					this.videoDisplaySlideSwiper.loop = false;
					this.videoDisplaySlideSwiper.destroy();
					this.videoDisplaySlideSwiper = null;
					console.log('videoDisplaySlideSwiper.destroy()====================')
				}
				console.log('initProductSwiper====================')
				this.videoDisplaySlideSwiper = new Swiper(this.$refs.videoDisplaySlide, {
					loop: true,
					keyboard: true,
					slidesPerView: 1,
					spaceBetween: 1,
					navigation: {
						nextEl: '.swiper-button-next',
						prevEl: '.swiper-button-prev',
					},
					autoplay: {
						delay: 4000,
				
					},
					on: {
			
						transitionEnd: function() {
							
							 
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.error-code {
		color: #f02d2d;
	}
</style>